<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>成语接龙 - AI挑战</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet">
    <style>
        :root {
            --primary: #3a7bd5;
            --primary-dark: #1a4b8c;
            --secondary: #00d2ff;
            --accent: #ff6b6b;
            --light: #f8f9fa;
            --dark: #212529;
            --success: #28a745;
            --warning: #ffc107;
            --danger: #dc3545;
            --info: #17a2b8;
            --gray: #6c757d;
            --light-gray: #e9ecef;
        }
        
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Noto Sans SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
            min-height: 100vh;
            color: var(--dark);
            overflow-x: hidden;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 2rem 1rem;
        }
        
        header {
            text-align: center;
            margin-bottom: 2rem;
            position: relative;
            animation: fadeIn 0.8s ease-out;
        }
        
        .logo {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 1rem;
        }
        
        .logo-icon {
            width: 50px;
            height: 50px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 1rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        
        .logo-icon svg {
            width: 30px;
            height: 30px;
            fill: white;
        }
        
        h1 {
            font-size: 2.8rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
            margin-bottom: 0.5rem;
            text-shadow: 1px 1px 3px rgba(0,0,0,0.1);
            position: relative;
            display: inline-block;
        }
        
        h1::after {
            content: '';
            position: absolute;
            bottom: -10px;
            left: 50%;
            transform: translateX(-50%);
            width: 120px;
            height: 4px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
            border-radius: 2px;
        }
        
        .subtitle {
            font-size: 1.2rem;
            color: var(--gray);
            max-width: 700px;
            margin: 0 auto 1.5rem;
            line-height: 1.6;
        }
        
        .difficulty-selector {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin: 2rem 0;
            flex-wrap: wrap;
        }
        
        .difficulty-card {
            width: 220px;
            padding: 1.5rem;
            border-radius: 12px;
            background: white;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
            border: 2px solid transparent;
        }
        
        .difficulty-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.12);
        }
        
        .difficulty-card.active {
            border-color: var(--primary);
            box-shadow: 0 10px 20px rgba(58, 123, 213, 0.2);
        }
        
        .difficulty-icon {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 1rem;
            font-size: 1.8rem;
            color: white;
        }
        
        .easy .difficulty-icon {
            background: linear-gradient(135deg, var(--success), #5cb85c);
        }
        
        .medium .difficulty-icon {
            background: linear-gradient(135deg, var(--warning), #f0ad4e);
        }
        
        .hard .difficulty-icon {
            background: linear-gradient(135deg, var(--danger), #d9534f);
        }
        
        .difficulty-title {
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 0.5rem;
        }
        
        .difficulty-desc {
            font-size: 0.9rem;
            color: var(--gray);
            margin-bottom: 1rem;
            line-height: 1.5;
        }
        
        .difficulty-stats {
            font-size: 0.9rem;
            color: var(--primary-dark);
            font-weight: 500;
        }
        
        .game-area {
            background-color: white;
            border-radius: 16px;
            padding: 2.5rem;
            box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
            margin-top: 2rem;
            position: relative;
            overflow: hidden;
            min-height: 500px;
            display: none;
            animation: fadeInUp 0.6s ease-out;
        }
        
        .game-area::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
        }
        
        .game-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 2rem;
            padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--light-gray);
        }
        
        .game-title {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
        }
        
        .game-stats {
            display: flex;
            gap: 1.5rem;
        }
        
        .stat-box {
            background: var(--light);
            padding: 0.7rem 1.2rem;
            border-radius: 8px;
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-weight: 500;
        }
        
        .stat-icon {
            width: 20px;
            height: 20px;
        }
        
        .score-display {
            color: var(--primary);
        }
        
        .timer-display {
            color: var(--danger);
        }
        
        .streak-display {
            color: var(--success);
        }
        
        .idiom-chain {
            min-height: 250px;
            margin: 2rem 0;
            position: relative;
        }
        
        .idiom-display {
            font-size: 2rem;
            text-align: center;
            margin: 1.5rem 0;
            padding: 1.5rem;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 12px;
            border-left: 6px solid var(--primary);
            transition: all 0.3s ease;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
            position: relative;
            overflow: hidden;
        }
        
        .idiom-display::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 40px;
            height: 40px;
            background: linear-gradient(135deg, rgba(58, 123, 213, 0.1) 0%, rgba(0, 210, 255, 0.1) 100%);
            border-bottom-left-radius: 100%;
        }
        
        .idiom-display:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
        }
        
        .last-character {
            color: var(--danger);
            font-weight: 700;
            font-size: 2.5rem;
            display: inline-block;
            margin-left: 0.5rem;
            text-shadow: 0 2px 4px rgba(220, 53, 69, 0.2);
        }
        
        .input-area {
            display: flex;
            gap: 1rem;
            margin-top: 2.5rem;
            flex-wrap: wrap;
        }
        
        .input-container {
            flex: 1;
            min-width: 300px;
            position: relative;
        }
        
        #idiom-input {
            width: 100%;
            padding: 1.2rem 1.5rem;
            font-size: 1.2rem;
            border: 2px solid var(--light-gray);
            border-radius: 10px;
            outline: none;
            transition: all 0.3s;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
        }
        
        #idiom-input:focus {
            border-color: var(--primary);
            box-shadow: 0 5px 15px rgba(58, 123, 213, 0.1);
        }
        
        .input-label {
            position: absolute;
            top: -10px;
            left: 15px;
            background: white;
            padding: 0 8px;
            font-size: 0.9rem;
            color: var(--primary);
            font-weight: 500;
        }
        
        .action-buttons {
            display: flex;
            gap: 1rem;
        }
        
        .action-btn {
            padding: 1.2rem 1.8rem;
            font-size: 1.1rem;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            font-weight: 600;
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: 120px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
        }
        
        .action-btn svg {
            width: 18px;
            height: 18px;
            margin-right: 8px;
        }
        
        .submit-btn {
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
        }
        
        .submit-btn:hover {
            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
            transform: translateY(-2px);
            box-shadow: 0 6px 12px rgba(58, 123, 213, 0.2);
        }
        
        .hint-btn {
            background: white;
            color: var(--dark);
            border: 2px solid var(--light-gray);
        }
        
        .hint-btn:hover {
            background: var(--light);
            border-color: var(--gray);
        }
        
        .result-message {
            margin-top: 1.5rem;
            padding: 1.2rem;
            border-radius: 10px;
            text-align: center;
            font-size: 1.1rem;
            font-weight: 500;
            display: none;
            animation: fadeIn 0.3s ease-out;
        }
        
        .success {
            background-color: rgba(40, 167, 69, 0.1);
            color: var(--success);
            border: 2px solid rgba(40, 167, 69, 0.2);
        }
        
        .error {
            background-color: rgba(220, 53, 69, 0.1);
            color: var(--danger);
            border: 2px solid rgba(220, 53, 69, 0.2);
        }
        
        .info {
            background-color: rgba(23, 162, 184, 0.1);
            color: var(--info);
            border: 2px solid rgba(23, 162, 184, 0.2);
        }
        
        .history-container {
            margin-top: 2.5rem;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            border-radius: 12px;
            padding: 1.5rem;
            max-height: 250px;
            overflow-y: auto;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.03);
            border: 1px solid var(--light-gray);
        }
        
        .history-title {
            font-size: 1.2rem;
            margin-bottom: 1rem;
            color: var(--primary-dark);
            font-weight: 700;
            display: flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .history-title svg {
            width: 18px;
            height: 18px;
            fill: var(--primary);
        }
        
        .history-list {
            list-style-type: none;
        }
        
        .history-item {
            padding: 0.8rem 0;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
            display: flex;
            justify-content: space-between;
            align-items: center;
            transition: all 0.2s;
        }
        
        .history-item:hover {
            background: rgba(255, 255, 255, 0.5);
            transform: translateX(5px);
        }
        
        .history-item:last-child {
            border-bottom: none;
        }
        
        .history-idiom {
            font-weight: 600;
            font-size: 1.1rem;
        }
        
        .history-status {
            font-size: 0.9rem;
            padding: 0.3rem 0.8rem;
            border-radius: 20px;
            font-weight: 500;
        }
        
        .correct {
            background-color: rgba(40, 167, 69, 0.1);
            color: var(--success);
        }
        
        .incorrect {
            background-color: rgba(220, 53, 69, 0.1);
            color: var(--danger);
        }
        
        .game-over {
            text-align: center;
            padding: 3rem;
            display: none;
            animation: fadeIn 0.6s ease-out;
        }
        
        .game-over h2 {
            font-size: 2.5rem;
            color: var(--primary-dark);
            margin-bottom: 1.5rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            background-clip: text;
            color: transparent;
        }
        
        .final-score-container {
            background: white;
            border-radius: 12px;
            padding: 2rem;
            max-width: 400px;
            margin: 0 auto 2rem;
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
            position: relative;
            overflow: hidden;
        }
        
        .final-score-container::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 8px;
            background: linear-gradient(90deg, var(--primary), var(--secondary));
        }
        
        .final-score-label {
            font-size: 1.2rem;
            color: var(--gray);
            margin-bottom: 0.5rem;
        }
        
        .final-score {
            font-size: 3.5rem;
            font-weight: 700;
            color: var(--primary);
            margin: 0.5rem 0;
        }
        
        .final-stats {
            display: flex;
            justify-content: center;
            gap: 1.5rem;
            margin: 1rem 0;
        }
        
        .final-stat {
            text-align: center;
        }
        
        .final-stat-value {
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--primary-dark);
        }
        
        .final-stat-label {
            font-size: 0.9rem;
            color: var(--gray);
        }
        
        .restart-btn {
            padding: 1.2rem 2.5rem;
            font-size: 1.2rem;
            background: linear-gradient(135deg, var(--primary), var(--primary-dark));
            color: white;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin-top: 1.5rem;
            font-weight: 600;
            box-shadow: 0 6px 12px rgba(58, 123, 213, 0.2);
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
        }
        
        .restart-btn svg {
            width: 20px;
            height: 20px;
            fill: white;
        }
        
        .restart-btn:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 16px rgba(58, 123, 213, 0.3);
        }
        
        .floating-characters {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            z-index: 0;
            overflow: hidden;
        }
        
        .floating-character {
            position: absolute;
            font-size: 1.8rem;
            opacity: 0.15;
            color: var(--primary);
            animation: float 20s infinite linear;
            font-weight: 700;
            user-select: none;
        }
        
        @keyframes float {
            0% {
                transform: translateY(0) translateX(0) rotate(0deg);
            }
            100% {
                transform: translateY(-100vh) translateX(100px) rotate(360deg);
            }
        }
        
        .ai-thinking {
            display: none;
            text-align: center;
            margin: 1.5rem 0;
            color: var(--primary-dark);
            font-style: italic;
            font-size: 1.1rem;
            animation: fadeIn 0.3s ease-out;
        }
        
        .loading-dots {
            display: inline-flex;
            align-items: center;
            height: 1em;
        }
        
        .loading-dots::after {
            content: '';
            animation: dots 1.5s steps(5, end) infinite;
            display: inline-block;
            vertical-align: bottom;
            width: 1.2em;
            overflow: hidden;
        }
        
        @keyframes dots {
            0%, 20% {
                content: '.';
            }
            40% {
                content: '..';
            }
            60% {
                content: '...';
            }
            80%, 100% {
                content: '';
            }
        }
        
        .deepseek-badge {
            display: inline-flex;
            align-items: center;
            background: rgba(58, 123, 213, 0.1);
            padding: 0.5rem 1rem;
            border-radius: 20px;
            color: var(--primary-dark);
            font-weight: 500;
            margin-top: 1rem;
        }
        
        .deepseek-badge svg {
            width: 16px;
            height: 16px;
            margin-right: 0.5rem;
            fill: var(--primary);
        }
        
        /* Animations */
        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }
        
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        @keyframes pulse {
            0%, 100% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.05);
            }
        }
        
        /* Scrollbar */
        ::-webkit-scrollbar {
            width: 8px;
        }
        
        ::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb {
            background: rgba(58, 123, 213, 0.3);
            border-radius: 10px;
        }
        
        ::-webkit-scrollbar-thumb:hover {
            background: rgba(58, 123, 213, 0.5);
        }
        
        /* Responsive */
        @media (max-width: 768px) {
            .container {
                padding: 1.5rem 1rem;
            }
            
            h1 {
                font-size: 2.2rem;
            }
            
            .difficulty-card {
                width: 100%;
                max-width: 280px;
            }
            
            .game-area {
                padding: 1.5rem;
            }
            
            .idiom-display {
                font-size: 1.6rem;
                padding: 1rem;
            }
            
            .last-character {
                font-size: 2rem;
            }
            
            .input-container {
                min-width: 100%;
            }
            
            .action-buttons {
                width: 100%;
            }
            
            .action-btn {
                flex: 1;
                padding: 1rem;
            }
            
            .game-over {
                padding: 2rem 1rem;
            }
            
            .final-score {
                font-size: 2.8rem;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="logo">
                <div class="logo-icon">
                    <svg viewBox="0 0 24 24">
                        <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M11,17H13V11H11V17M11,9H13V7H11V9Z" />
                    </svg>
                </div>
                <h1>成语接龙挑战</h1>
            </div>
            <p class="subtitle">测试你的成语知识，与AI一较高下！选择难度开始游戏，展示你的词汇量。</p>
            
            <div class="difficulty-selector">
                <div class="difficulty-card easy" data-level="easy">
                    <div class="difficulty-icon">易</div>
                    <h3 class="difficulty-title">简单模式</h3>
                    <p class="difficulty-desc">适合初学者，时间宽松，AI反应较慢</p>
                    <div class="difficulty-stats">90秒 · 提示-5分</div>
                </div>
                
                <div class="difficulty-card medium" data-level="medium">
                    <div class="difficulty-icon">中</div>
                    <h3 class="difficulty-title">中等模式</h3>
                    <p class="difficulty-desc">平衡挑战，适中的时间和AI反应</p>
                    <div class="difficulty-stats">60秒 · 提示-10分</div>
                </div>
                
                <div class="difficulty-card hard" data-level="hard">
                    <div class="difficulty-icon">难</div>
                    <h3 class="difficulty-title">困难模式</h3>
                    <p class="difficulty-desc">专家级别，时间紧张，AI反应迅速</p>
                    <div class="difficulty-stats">45秒 · 提示-15分</div>
                </div>
            </div>
            
            <div class="deepseek-badge">
                <svg viewBox="0 0 24 24">
                    <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,17H13V11H11V17M11,9H13V7H11V9Z" />
                </svg>
                由AI提供支持
            </div>
        </header>
        
        <div class="game-area" id="gameArea">
            <div class="floating-characters" id="floatingChars"></div>
            
            <div class="game-header">
                <h2 class="game-title">成语接龙挑战</h2>
                <div class="game-stats">
                    <div class="stat-box score-display">
                        <svg class="stat-icon" viewBox="0 0 24 24">
                            <path d="M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4M11,17H13V11H11V17M11,9H13V7H11V9Z" />
                        </svg>
                        得分: <span id="score">0</span>
                    </div>
                    <div class="stat-box timer-display">
                        <svg class="stat-icon" viewBox="0 0 24 24">
                            <path d="M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z" />
                        </svg>
                        时间: <span id="timer">60</span>秒
                    </div>
                    <div class="stat-box streak-display">
                        <svg class="stat-icon" viewBox="0 0 24 24">
                            <path d="M7,2V13H10V22L17,10H13L17,2H7Z" />
                        </svg>
                        连击: <span id="streak">0</span>
                    </div>
                </div>
            </div>
            
            <div class="idiom-chain">
                <div class="idiom-display">
                    当前成语: <span id="currentIdiom">一马当先</span>
                    <br>
                    接龙字: <span class="last-character" id="lastChar">先</span>
                </div>
                
                <div class="ai-thinking" id="aiThinking">
                    <svg width="24" height="24" viewBox="0 0 24 24" style="display:inline-block;vertical-align:middle;margin-right:8px;">
                        <path fill="currentColor" d="M12,4V2A10,10 0 0,0 2,12H4A8,8 0 0,1 12,4Z" />
                    </svg>
                    AI正在思考<span class="loading-dots"></span>
                </div>
                
                <div class="result-message" id="resultMessage"></div>
                
                <div class="input-area">
                    <div class="input-container">
                        <div class="input-label">输入接龙的成语</div>
                        <input type="text" id="idiom-input" placeholder="例如: 先发制人" autocomplete="off">
                    </div>
                    
                    <div class="action-buttons">
                        <button class="action-btn submit-btn" id="submitBtn">
                            <svg viewBox="0 0 24 24">
                                <path fill="currentColor" d="M2,21L23,12L2,3V10L17,12L2,14V21Z" />
                            </svg>
                            提交
                        </button>
                        <button class="action-btn hint-btn" id="hintBtn">
                            <svg viewBox="0 0 24 24">
                                <path fill="currentColor" d="M11,18H13V16H11V18M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,6A4,4 0 0,0 8,10H10A2,2 0 0,1 12,8A2,2 0 0,1 14,10C14,12 11,11.75 11,15H13C13,12.75 16,12.5 16,10A4,4 0 0,0 12,6Z" />
                            </svg>
                            提示
                        </button>
                    </div>
                </div>
                
                <div class="history-container">
                    <div class="history-title">
                        <svg viewBox="0 0 24 24">
                            <path fill="currentColor" d="M11,7A2,2 0 0,0 9,9V11A2,2 0 0,0 11,13H13V15H9V17H13A2,2 0 0,0 15,15V13A2,2 0 0,0 13,11H11V9H15V7H11M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2M12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4Z" />
                        </svg>
                        接龙历史
                    </div>
                    <ul class="history-list" id="historyList"></ul>
                </div>
            </div>
        </div>
        
        <div class="game-over" id="gameOver">
            <h2>游戏结束!</h2>
            
            <div class="final-score-container">
                <div class="final-score-label">你的最终得分</div>
                <div class="final-score" id="finalScore">0</div>
                
                <div class="final-stats">
                    <div class="final-stat">
                        <div class="final-stat-value" id="finalCorrect">0</div>
                        <div class="final-stat-label">正确成语</div>
                    </div>
                    <div class="final-stat">
                        <div class="final-stat-value" id="finalStreak">0</div>
                        <div class="final-stat-label">最高连击</div>
                    </div>
                    <div class="final-stat">
                        <div class="final-stat-value" id="finalTime">0</div>
                        <div class="final-stat-label">剩余时间</div>
                    </div>
                </div>
            </div>
            
            <button class="restart-btn" id="restartBtn">
                <svg viewBox="0 0 24 24">
                    <path fill="currentColor" d="M12,4C14.1,4 16.1,4.8 17.6,6.3C20.7,9.4 20.7,14.5 17.6,17.6C15.8,19.5 13.3,20.2 10.9,19.9L11.4,17.9C13.1,18.1 14.9,17.5 16.2,16.2C18.5,13.9 18.5,10.1 16.2,7.7C15.1,6.6 13.5,6 12,6V10.6L7,5.6L12,0.6V4M6.3,17.6C3.7,15 3.3,11 5.1,7.9L6.6,9.4C5.5,11.6 5.9,14.4 7.8,16.2C8.3,16.7 8.9,17.1 9.6,17.4L9,19.4C8,19 7.1,18.4 6.3,17.6Z" />
                </svg>
                再玩一次
            </button>
        </div>
    </div>

    <script>
        // 游戏状态
        const gameState = {
            difficulty: null,
            score: 0,
            score: 0,
            timeLeft: 60,
            timer: null,
            currentIdiom: '一马当先',
            usedIdioms: new Set(['一马当先']),
            gameActive: false,
            lastCharacter: '先',
            streak: 0,
            maxStreak: 0,
            correctCount: 0,
            apiKey: 'sk-c6a7fb0a88f04c45a858716ce9aec15c', // 替换为你的DeepSeek API密钥
            apiBaseUrl: 'https://api.deepseek.com/v1/chat/completions', // DeepSeek API基础URL
            aiThinking: false
        };
        
        // 难度设置
        const difficultySettings = {
            easy: {
                time: 90,
                pointMultiplier: 1,
                hintPenalty: 5,
                aiDelay: 3500,
                aiSkill: "你是一个成语接龙游戏的简单AI对手，请用简单常见的成语进行接龙"
            },
            medium: {
                time: 60,
                pointMultiplier: 1.5,
                hintPenalty: 10,
                aiDelay: 2500,
                aiSkill: "你是一个成语接龙游戏的中等AI对手，请用中等难度的成语进行接龙"
            },
            hard: {
                time: 45,
                pointMultiplier: 2,
                hintPenalty: 15,
                aiDelay: 1500,
                aiSkill: "你是一个成语接龙游戏的困难AI对手，请用较难和不常见的成语进行接龙"
            }
        };
        
        // DOM元素
        const elements = {
            gameArea: document.getElementById('gameArea'),
            scoreDisplay: document.getElementById('score'),
            timerDisplay: document.getElementById('timer'),
            streakDisplay: document.getElementById('streak'),
            currentIdiomDisplay: document.getElementById('currentIdiom'),
            lastCharDisplay: document.getElementById('lastChar'),
            idiomInput: document.getElementById('idiom-input'),
            submitBtn: document.getElementById('submitBtn'),
            hintBtn: document.getElementById('hintBtn'),
            resultMessage: document.getElementById('resultMessage'),
            historyList: document.getElementById('historyList'),
            gameOver: document.getElementById('gameOver'),
            finalScore: document.getElementById('finalScore'),
            finalCorrect: document.getElementById('finalCorrect'),
            finalStreak: document.getElementById('finalStreak'),
            finalTime: document.getElementById('finalTime'),
            restartBtn: document.getElementById('restartBtn'),
            difficultyCards: document.querySelectorAll('.difficulty-card'),
            floatingChars: document.getElementById('floatingChars'),
            aiThinking: document.getElementById('aiThinking')
        };
        
        // 初始化游戏
        function initGame() {
            // 重置游戏状态
            gameState.score = 0;
            gameState.timeLeft = difficultySettings[gameState.difficulty].time;
            gameState.usedIdioms = new Set(['一马当先']);
            gameState.currentIdiom = '一马当先';
            gameState.lastCharacter = '先';
            gameState.streak = 0;
            gameState.maxStreak = 0;
            gameState.correctCount = 0;
            gameState.aiThinking = false;
            
            // 更新UI
            elements.scoreDisplay.textContent = gameState.score;
            elements.streakDisplay.textContent = gameState.streak;
            elements.timerDisplay.textContent = gameState.timeLeft;
            elements.currentIdiomDisplay.textContent = gameState.currentIdiom;
            elements.lastCharDisplay.textContent = gameState.lastCharacter;
            elements.historyList.innerHTML = '';
            elements.resultMessage.style.display = 'none';
            elements.aiThinking.style.display = 'none';
            
            // 显示游戏区域
            elements.gameArea.style.display = 'block';
            elements.gameOver.style.display = 'none';
            
            // 创建浮动字符
            createFloatingCharacters();
            
            // 聚焦输入框
            setTimeout(() => {
                elements.idiomInput.focus();
            }, 300);
        }
        
        // 设置难度
        function setDifficulty(level) {
            gameState.difficulty = level;
            
            // 高亮选中的难度卡片
            elements.difficultyCards.forEach(card => {
                card.classList.remove('active');
                if (card.dataset.level === level) {
                    card.classList.add('active');
                }
            });
            
            // 开始游戏
            initGame();
            startGame();
        }
        
        // 开始游戏
        function startGame() {
            gameState.gameActive = true;
            
            // 开始计时器
            gameState.timer = setInterval(() => {
                gameState.timeLeft--;
                elements.timerDisplay.textContent = gameState.timeLeft;
                
                if (gameState.timeLeft <= 0) {
                    endGame();
                }
            }, 1000);
        }
        
        // 结束游戏
        function endGame() {
            clearInterval(gameState.timer);
            gameState.gameActive = false;
            
            // 更新游戏结束界面数据
            elements.finalScore.textContent = gameState.score;
            elements.finalCorrect.textContent = gameState.correctCount;
            elements.finalStreak.textContent = gameState.maxStreak;
            elements.finalTime.textContent = gameState.timeLeft;
            
            // 显示游戏结束界面
            elements.gameArea.style.display = 'none';
            elements.gameOver.style.display = 'block';
            
            // 发送成绩到API (示例)
            // sendGameResults();
        }
        
        // 验证成语有效性 (使用DeepSeek API)
        async function isValidIdiom(idiom) {
            // 基本验证
            if (idiom.length !== 4) {
                return { valid: false, message: '成语必须是四个字' };
            }
            
            if (gameState.usedIdioms.has(idiom)) {
                return { valid: false, message: '这个成语已经使用过了' };
            }
            
            // 使用DeepSeek API验证成语
            try {
                const response = await fetch(`${gameState.apiBaseUrl}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${gameState.apiKey}`
                    },
                    body: JSON.stringify({
                        idiom: idiom,
                        last_char: gameState.lastCharacter
                    })
                });
                
                const data = await response.json();
                
                if (!response.ok) {
                    return { valid: false, message: data.message || '验证成语时出错' };
                }
                
                return data; // 应该包含 valid 和 message 属性
            } catch (error) {
                console.error('验证成语出错:', error);
                // 如果API失败，使用本地简单验证
                return localValidateIdiom(idiom);
            }
        }
        
        // 本地简单验证 (当API不可用时)
        function localValidateIdiom(idiom) {
            // 这是一个简化的验证，实际应用中应该使用API
            const commonIdioms = [
                '一马当先', '先发制人', '人山人海', '海阔天空', '空穴来风',
                '风花雪月', '月明星稀', '稀奇古怪', '怪力乱神', '神采飞扬',
                '扬眉吐气', '气宇轩昂', '昂首阔步', '步步高升', '升官发财',
                '财大气粗', '粗枝大叶', '叶公好龙', '龙马精神', '神出鬼没',
                '没齿难忘', '忘恩负义', '义无反顾', '顾全大局', '局促不安',
                '安居乐业', '业精于勤', '勤学苦练', '练达老成', '成千上万',
                '万紫千红', '红红火火', '火上浇油', '油然而生', '生龙活虎',
                '虎头蛇尾', '尾大不掉', '掉以轻心', '心花怒放', '放任自流',
                '流连忘返', '返老还童', '童言无忌', '忌贤妒能', '能说会道',
                '道听途说', '说三道四', '四面楚歌', '歌舞升平', '平步青云'
            ];
            
            if (!commonIdioms.includes(idiom)) {
                return { valid: false, message: '这不是一个有效的成语' };
            }
            
            if (idiom[0] !== gameState.lastCharacter) {
                return { valid: false, message: `成语必须以"${gameState.lastCharacter}"开头` };
            }
            
            return { valid: true, message: '有效成语' };
        }
        
        // 处理用户提交
        async function handleSubmit() {
            if (!gameState.gameActive || gameState.aiThinking) return;
            
            const userInput = elements.idiomInput.value.trim();
            
            // 检查输入是否为空
            if (!userInput) {
                showResult('请输入一个成语', 'error');
                return;
            }
            
            // 验证成语
            const validation = await isValidIdiom(userInput);
            
            if (!validation.valid) {
                showResult(validation.message, 'error');
                resetStreak();
                elements.idiomInput.value = '';
                return;
            }
            
            // 有效成语处理
            processCorrectIdiom(userInput);
        }
        
        // 处理正确的成语
        function processCorrectIdiom(idiom) {
            // 更新分数和连击
            const points = 10 * difficultySettings[gameState.difficulty].pointMultiplier;
            gameState.score += points;
            gameState.streak++;
            gameState.maxStreak = Math.max(gameState.maxStreak, gameState.streak);
            gameState.correctCount++;
            
            elements.scoreDisplay.textContent = gameState.score;
            elements.streakDisplay.textContent = gameState.streak;
            
            // 更新当前成语和最后一个字
            gameState.currentIdiom = idiom;
            gameState.lastCharacter = idiom[idiom.length - 1];
            gameState.usedIdioms.add(idiom);
            
            // 更新UI
            elements.currentIdiomDisplay.textContent = idiom;
            elements.lastCharDisplay.textContent = gameState.lastCharacter;
            elements.idiomInput.value = '';
            
            // 添加到历史记录
            addToHistory(idiom, true);
            
            // 显示成功消息
            showResult(`正确! +${points}分 (连击x${gameState.streak})`, 'success');
            
            // 更新浮动字符
            createFloatingCharacters();
            
            // AI回合
            setTimeout(aiTurn, difficultySettings[gameState.difficulty].aiDelay);
        }
        
        // 重置连击
        function resetStreak() {
            gameState.streak = 0;
            elements.streakDisplay.textContent = gameState.streak;
        }
        
        // AI回合
        async function aiTurn() {
            if (!gameState.gameActive) return;
            
            gameState.aiThinking = true;
            elements.aiThinking.style.display = 'block';
            
            try {
                // 使用DeepSeek API获取AI的接龙
                const response = await fetch(`${gameState.apiBaseUrl}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${gameState.apiKey}`
                    },
                    body: JSON.stringify({
                        last_char: gameState.lastCharacter,
                        used_idioms: Array.from(gameState.usedIdioms),
                        difficulty: gameState.difficulty,
                        skill: difficultySettings[gameState.difficulty].aiSkill
                    })
                });
                
                const data = await response.json();
                
                if (!response.ok) {
                    throw new Error(data.message || 'AI接龙失败');
                }
                
                const aiChoice = data.idiom;
                
                // 更新游戏状态
                gameState.currentIdiom = aiChoice;
                gameState.lastCharacter = aiChoice[aiChoice.length - 1];
                gameState.usedIdioms.add(aiChoice);
                resetStreak();
                
                // 更新UI
                elements.currentIdiomDisplay.textContent = aiChoice;
                elements.lastCharDisplay.textContent = gameState.lastCharacter;
                
                // 添加到历史记录
                addToHistory(aiChoice, false);
                
                // 显示AI的消息
                showResult(`DeepSeek AI接龙: ${aiChoice}`, 'info');
                
                // 更新浮动字符
                createFloatingCharacters();
                
            } catch (error) {
                console.error('AI接龙出错:', error);
                // 如果API失败，使用本地简单AI
                localAiTurn();
            } finally {
                elements.aiThinking.style.display = 'none';
                gameState.aiThinking = false;
                
                // 重新聚焦输入框
                elements.idiomInput.focus();
            }
        }
        
        // 本地简单AI (当API不可用时)
        function localAiTurn() {
            // 查找可用的成语
            const possibleIdioms = [
                '一马当先', '先发制人', '人山人海', '海阔天空', '空穴来风',
                '风花雪月', '月明星稀', '稀奇古怪', '怪力乱神', '神采飞扬',
                '扬眉吐气', '气宇轩昂', '昂首阔步', '步步高升', '升官发财',
                '财大气粗', '粗枝大叶', '叶公好龙', '龙马精神', '神出鬼没',
                '没齿难忘', '忘恩负义', '义无反顾', '顾全大局', '局促不安',
                '安居乐业', '业精于勤', '勤学苦练', '练达老成', '成千上万',
                '万紫千红', '红红火火', '火上浇油', '油然而生', '生龙活虎',
                '虎头蛇尾', '尾大不掉', '掉以轻心', '心花怒放', '放任自流',
                '流连忘返', '返老还童', '童言无忌', '忌贤妒能', '能说会道',
                '道听途说', '说三道四', '四面楚歌', '歌舞升平', '平步青云'
            ].filter(idiom => 
                !gameState.usedIdioms.has(idiom) && 
                idiom[0] === gameState.lastCharacter
            );
            
            if (possibleIdioms.length > 0) {
                // AI选择一个成语
                const aiChoice = possibleIdioms[Math.floor(Math.random() * possibleIdioms.length)];
                
                // 更新游戏状态
                gameState.currentIdiom = aiChoice;
                gameState.lastCharacter = aiChoice[aiChoice.length - 1];
                gameState.usedIdioms.add(aiChoice);
                resetStreak();
                
                // 更新UI
                elements.currentIdiomDisplay.textContent = aiChoice;
                elements.lastCharDisplay.textContent = gameState.lastCharacter;
                
                // 添加到历史记录
                addToHistory(aiChoice, false);
                
                // 显示AI的消息
                showResult(`AI接龙: ${aiChoice}`, 'info');
                
                // 更新浮动字符
                createFloatingCharacters();
            } else {
                // AI无法接龙，玩家获胜
                showResult('DeepSeek AI无法接龙，你赢了!', 'success');
                gameState.score += 50;
                elements.scoreDisplay.textContent = gameState.score;
                endGame();
            }
        }
        
        // 显示结果消息
        function showResult(message, type) {
            elements.resultMessage.textContent = message;
            elements.resultMessage.className = 'result-message ' + type;
            elements.resultMessage.style.display = 'block';
            
            // 3秒后隐藏消息
            setTimeout(() => {
                elements.resultMessage.style.display = 'none';
            }, 3000);
        }
        
        // 添加到历史记录
        function addToHistory(idiom, isPlayer) {
            const li = document.createElement('li');
            li.className = 'history-item';
            
            const idiomSpan = document.createElement('span');
            idiomSpan.className = 'history-idiom';
            idiomSpan.textContent = idiom;
            
            const statusSpan = document.createElement('span');
            statusSpan.className = `history-status ${isPlayer ? 'correct' : 'incorrect'}`;
            statusSpan.textContent = isPlayer ? '✓ 玩家' : '✗ AI';
            
            li.appendChild(idiomSpan);
            li.appendChild(statusSpan);
            elements.historyList.prepend(li);
        }
        
        // 获取提示
        async function getHint() {
            if (!gameState.gameActive || gameState.aiThinking) return;
            
            try {
                // 使用DeepSeek API获取提示
                const response = await fetch(`${gameState.apiBaseUrl}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${gameState.apiKey}`
                    },
                    body: JSON.stringify({
                        last_char: gameState.lastCharacter,
                        used_idioms: Array.from(gameState.usedIdioms),
                        difficulty: gameState.difficulty
                    })
                });
                
                const data = await response.json();
                
                if (!response.ok) {
                    throw new Error(data.message || '获取提示失败');
                }
                
                // 显示提示（只显示第一个字）
                elements.idiomInput.value = data.hint[0];
                
                // 扣分
                const penalty = difficultySettings[gameState.difficulty].hintPenalty;
                gameState.score = Math.max(0, gameState.score - penalty);
                elements.scoreDisplay.textContent = gameState.score;
                
                showResult(`使用了提示，-${penalty}分`, 'error');
                resetStreak();
                
            } catch (error) {
                console.error('获取提示出错:', error);
                // 如果API失败，使用本地简单提示
                localGetHint();
            }
        }
        
        // 本地简单提示 (当API不可用时)
        function localGetHint() {
            // 查找可能的成语
            const possibleHints = [
                '一马当先', '先发制人', '人山人海', '海阔天空', '空穴来风',
                '风花雪月', '月明星稀', '稀奇古怪', '怪力乱神', '神采飞扬',
                '扬眉吐气', '气宇轩昂', '昂首阔步', '步步高升', '升官发财',
                '财大气粗', '粗枝大叶', '叶公好龙', '龙马精神', '神出鬼没',
                '没齿难忘', '忘恩负义', '义无反顾', '顾全大局', '局促不安',
                '安居乐业', '业精于勤', '勤学苦练', '练达老成', '成千上万',
                '万紫千红', '红红火火', '火上浇油', '油然而生', '生龙活虎',
                '虎头蛇尾', '尾大不掉', '掉以轻心', '心花怒放', '放任自流',
                '流连忘返', '返老还童', '童言无忌', '忌贤妒能', '能说会道',
                '道听途说', '说三道四', '四面楚歌', '歌舞升平', '平步青云'
            ].filter(idiom => 
                !gameState.usedIdioms.has(idiom) && 
                idiom[0] === gameState.lastCharacter
            );
            
            if (possibleHints.length > 0) {
                // 随机选择一个提示
                const hint = possibleHints[Math.floor(Math.random() * possibleHints.length)];
                
                // 显示提示（只显示第一个字）
                elements.idiomInput.value = hint[0];
                
                // 扣分
                const penalty = difficultySettings[gameState.difficulty].hintPenalty;
                gameState.score = Math.max(0, gameState.score - penalty);
                elements.scoreDisplay.textContent = gameState.score;
                
                showResult(`使用了提示，-${penalty}分`, 'error');
                resetStreak();
            } else {
                showResult('没有可用的提示', 'error');
            }
        }
        
        // 创建浮动字符
        function createFloatingCharacters() {
            elements.floatingChars.innerHTML = '';
            
            // 从当前成语中获取字符
            const chars = gameState.currentIdiom.split('');
            
            // 添加一些随机字符
            for (let i = 0; i < 15; i++) {
                chars.push(String.fromCharCode(0x4e00 + Math.floor(Math.random() * 1000)));
            }
            
            // 创建浮动元素
            chars.forEach(char => {
                const element = document.createElement('div');
                element.className = 'floating-character';
                element.textContent = char;
                
                // 随机位置和动画
                element.style.left = `${Math.random() * 100}%`;
                element.style.top = `${Math.random() * 100}%`;
                element.style.animationDelay = `${Math.random() * 5}s`;
                element.style.animationDuration = `${15 + Math.random() * 15}s`;
                element.style.fontSize = `${1 + Math.random() * 1.5}rem`;
                element.style.opacity = `${0.1 + Math.random() * 0.15}`;
                
                elements.floatingChars.appendChild(element);
            });
        }
        
        // 发送游戏结果到API (示例)
        async function sendGameResults() {
            try {
                const response = await fetch(`${gameState.apiBaseUrl}`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${gameState.apiKey}`
                    },
                    body: JSON.stringify({
                        score: gameState.score,
                        correct_count: gameState.correctCount,
                        max_streak: gameState.maxStreak,
                        difficulty: gameState.difficulty,
                        time_left: gameState.timeLeft
                    })
                });
                
                const data = await response.json();
                console.log('游戏结果已保存:', data);
            } catch (error) {
                console.error('保存游戏结果出错:', error);
            }
        }
        
        // 事件监听
        elements.difficultyCards.forEach(card => {
            card.addEventListener('click', () => setDifficulty(card.dataset.level));
        });
        
        elements.submitBtn.addEventListener('click', handleSubmit);
        elements.idiomInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter') handleSubmit();
        });
        
        elements.hintBtn.addEventListener('click', getHint);
        elements.restartBtn.addEventListener('click', () => {
            setDifficulty(gameState.difficulty);
        });
        
        // 初始状态显示难度选择
        elements.gameArea.style.display = 'none';
        elements.gameOver.style.display = 'none';
    </script>
</body>
</html>